<template>
  <div class="edit">
    <van-nav-bar
      :title="userInfo.name"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 图片区域 -->
    <div class="myImage">
      <van-image
        round
        width="120px"
        height="120px"
        :src="userInfo.photo"
        fit="cover"
      />
      <!-- 上传文件 -->
      <van-uploader class="myuploader" :after-read="afterRead" />
    </div>
    <div class="content">
      <van-cell-group>
        <van-cell
          title="名称"
          :value="userInfo.name"
          is-link
          @click="openName"
        />
        <van-cell
          title="性别"
          :value="userInfo.gender == 0 ? '男' : '女'"
          is-link
          @click="showPopup"
        />
        <!-- pop弹出层 -->
        <van-popup v-model="show1" position="bottom" :style="{ height: '20%' }">
          <van-nav-bar title="修改性别" left-text="取消" />
          <!-- 单元格结构 -->
          <van-cell-group>
            <van-cell title="男" is-link @click="changeGender(0)" />
            <van-cell title="女" is-link @click="changeGender(1)" />
          </van-cell-group>
        </van-popup>
        <!-- 生日 -->
        <van-cell
          title="生日"
          :value="userInfo.birthday"
          is-link
          @click="birth"
        />
        <van-popup
          v-model="mybirth"
          position="bottom"
          :style="{ height: '50%' }"
        >
          <!--datetimepicker  -->
          <van-datetime-picker
            @confirm="onConfirm"
            @cancel="onCancel"
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
      </van-cell-group>
    </div>
    <!-- dialog组件 -->
    <van-dialog
      v-model="show"
      title="修改名称"
      show-cancel-button
      @confirm="myconfirm"
    >
      <van-field
        v-model="userInfo.name"
        placeholder="请输入用户名"
        ref="myfield"
      />
    </van-dialog>
    <!-- 裁剪容器 -->
    <div class="myCut" v-if="myCutShow">
      <!-- 裁剪区域 -->
      <vueCropper
        ref="cropper"
        :img="myimg"
        autoCrop
        autoCropWidth="120"
        autoCropHeight="120"
      ></vueCropper>
      <div class="cutbtn">
        <span class="left" @click="cutImg"> 裁剪 </span>
        <span class="right" @click="cancle"> 取消 </span>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { VueCropper } from 'vue-cropper'
// import { getProfileApi } from '@/api/index'
import { getUserProfileApi, getUserphotoApi } from '@/api'

export default {
  data () {
    return {
      myimg: '',
      myCutShow: false,
      time: true,
      show: false,
      show1: false,
      mybirth: false,
      currentDate: new Date(2022, 4, 4),

      minDate: new Date(1920, 1, 1),
      maxDate: new Date(2080, 12, 31)
    }
  },
  components: {
    VueCropper
  },
  methods: {
    // 点击取消按钮，关闭截取窗口

    cancle () {
      this.myCutShow = false
    },
    // 裁取图片
    cutImg () {
      // 获取裁剪的图片信息
      this.$refs.cropper.getCropBlob(async (data) => {
        // do something
        // console.log(data)
        const res = await getUserphotoApi(data)
        // console.log(res)
        // 将得到的图片数据更新到vuex中
        this.$store.commit('setUserinfo', {
          ...this.userInfo,
          photo: res.data.data.photo
        })
        // 关闭截取窗口
        this.myCutShow = false
      })
    },
    // 上传文件
    afterRead (file) {
      // 将选中的图片信息赋值给myimg
      this.myimg = file.content
      this.myCutShow = true
      console.log(file)
    },
    // 取消按钮，关闭时间选择器
    onCancel () {
      this.mybirth = false
    },
    // 确认按钮，又一个参数value可以获取到当前选中的时间
    async onConfirm (value) {
      // 获取到的value是
      console.log(value)
      const time = moment(value).format('YYYY-MM-DD') // 将获取到的value通过moment插件转换为YYYY-MM-DD格式的时间
      console.log(time)
      // 根据time发起请求，更改birthday
      await getUserProfileApi({
        birthday: time
      })
      //  跟新vuex中数据
      this.$store.commit('setUserinfo', {
        ...this.userInfo,
        birthday: time
      })
      // 关闭时间选择器面板
      this.mybirth = false

      //
    },
    // 打开生日面板是需要给一个默认值，this.useInfo.birthday
    birth () {
      this.mybirth = true
      this.currentDate = this.userInfo.birthday
    },
    showPopup () {
      this.show1 = true
    },
    async changeGender (gender) {
      // 调用getUserProfileApi
      await getUserProfileApi({
        gender: gender
      })
      // 更新uvex中数据
      this.$store.commit('setUserinfo', {
        ...this.userInfo,
        gender: gender
      })
      // 退出pop层
      this.show1 = false
      // 轻提示更改成功
      this.$toast.success('更改成功')
    },
    openName () {
      this.show = true
      // 自动获取焦点，通过refs来获取dom
      // 异步代码可能还未渲染完成，可用$nexttick
      this.$nextTick(() => {
        this.$refs.myfield.focus()
      })
    },
    async myconfirm () {
      await getUserProfileApi({
        name: this.userInfo.name
      })
      // console.log(res)
      // 将数据更新的到vuex中
      this.$store.commit('setUserinfo', {
        ...this.userInfo,
        name: this.userInfo.name
      })
    }
  },
  async created () {
    // 因为数据来自my页面，并没有做数据的持久胡处理，刷新或者直接访问edit页面会获取不到数据，因此在发一次请求
    // 导入发起请求的api
    // const res = await getProfileApi()
    // 保存到vuex中
    // this.$store.commit('setUserinfo', res.data.data)
    // 直接调用actions中方法
    this.$store.dispatch('getUserInfo')
  },
  computed: {
    userInfo: function () {
      return this.$store.state.userInfo
    }
  }
}
</script>

<style lang="less">
.edit {
  .myImage {
    text-align: center;
    margin: 20px 0;
    position: relative;
    .myuploader {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      opacity: 0;
      .van-uploader__upload {
        width: 130px;
        background-color: red;
        height: 100px;
      }
    }
  }
  .myCut {
    width: 100vw;
    height: 100vh;
    background-color: red;
    position: fixed;
    top: 0%;
    left: 0;
    // z-index: 9999;
    // display: flex;
    // justify-content: space-between;
    .cutbtn {
      width: 100vw;
      position: absolute;
      display: flex;
      justify-content: space-between;
      bottom: 0;
      left: 0;
      span {
        width: 60px;
        height: 40px;

        color: #fff;
        background-color: #07c160;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
</style>
